<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动态表格</title>
    <style>
      body {
        text-align: center;
      }

      table,
      th,
      td {
        border: 1px solid #ccc;
        border-collapse: collapse;
        margin: 50px auto;
        padding: 10px 50px;
        text-align: center;
      }

      img {
        width: 100px;
        height: 100px;
      }

      tbody input[type='text'] {
        width: 20px;
        height: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        商品表
      </caption>
      <thead>
        <tr>
          <th>序号</th>
          <th>商品名称</th>
          <th>图片</th>
          <th>商品类型</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 数据动态加载... -->
      </tbody>
    </table>

    <a href="#" onclick="prev()">上一页</a>
    <a href="#" onclick="next()">下一页</a>

    <script>
      //初始化商品
      const item1 = new Item('iPhone 15', 'iphone15.jpg', '手机', 9999)
      const item2 = new Item('iPad Pro', 'ipad.jpg', '平板电脑', 9299)
      const item3 = new Item('Apple Watch Ultra 2', 'iWatch.jpg', '手表', 6499)
      const item4 = new Item('AirPods', 'AirPods.jpg', '耳机', 1399)
      const item5 = new Item('AirTag', 'AirTag.jpg', '周边配件', 249)
      const item6 = new Item('Apple Watch Series 9', 'Apple Watch Series 9.jpg', '手表', 2999)
      const item7 = new Item('MacBookPro', 'MacBookPro.jpg', '电脑', 15999)
      const item8 = new Item('Pro Display XDR', 'Pro Display XDR.jpg', '显示器', 39999)
      const item9 = new Item('iPhone SE', 'iPhone SE.jpg', '手机', 3499)
      const item10 = new Item('iMac', 'iMac.jpg', '电脑', 9999)

      //定义数组
      const items = [item1, item2, item3, item4, item5, item6, item7, item8, item9, item10]

      //按照一定的方式排序商品 -- 按照价格降序排列
      //items.sort((a, b) => a.price - b.price)

      //按照商品类别排序
      //items.sort((a, b) => a.type - b.type)

      //按照商品列表排序,并且相同类别的商品按照升序排序
      items.sort((a, b) => {
        //原理: 按照a和b比较的正,零,负来决定如何排序
        //注意: 字符串比较实用localeCompare(),数字比较直接运算即可
        let r = a.type.localeCompare(b.type)
        if (r == 0) {
          r = a.price - b.price
        }
        return r
      })

      let pageNow = 1
      let pageSize = 3
      //总页数
      let totalPage = items.length % pageSize == 0 ? items.length / pageSize : Math.floor(items.length / pageSize) + 1
      console.warn(totalPage)

      //商品的构造函数
      function Item(name, pic, type, price) {
        this.name = name
        this.pic = pic
        this.type = type
        this.price = price
      }

      /* 数组分区, pageNow表示第几区(第几页),pageSize每页显示的元素个数*/
      function pageItems(pageNow, pageSize) {
        return items.slice((pageNow - 1) * pageSize, (pageNow - 1) * pageSize + pageSize)
      }

      function showData(pageNow) {
        //循环拼接表格数据
        let tableData = ''
        pageItems(pageNow, pageSize).forEach(
          (item, idx) =>
            (tableData += `<tr>
            <td>${idx + 1}</td><td>${item.name}</td><td><img src='../img/${item.pic}'></img></td><td>${item.type}</td><td>${item.price}</td><td>\
              <input type='button' value='－' onclick='changeAmount("no${idx + 1}",-1)'/> <input type='text' value='1' id='no${idx + 1}' maxlength='2' readonly/> 
              <input type='button' value='＋' onclick='changeAmount("no${idx + 1}",1)'/></td><td><a href='#'>删除</a></td>
          </tr>`)
        )
        //把输入通过dom渲染到页面上
        document.querySelector('tbody').innerHTML = tableData
      }
      showData(pageNow)

      function next() {
        pageNow += 1
        if (pageNow > totalPage) {
          pageNow = totalPage
        }
        showData(pageNow)
      }

      function prev() {
        pageNow -= 1
        if (pageNow < 1) {
          pageNow = 1
        }
        showData(pageNow)
      }

      function changeAmount(id, step) {
        let amount = parseInt(document.querySelector('#' + id).value)
        amount += step
        if (amount < 1) {
          amount = 1
        }
        if (amount > 99) {
          amount = 99
        }
        document.querySelector('#' + id).value = amount
      }
    </script>
  </body>
</html>
